import React, { Component, Fragment } from "react";
// antd
import { Modal, Table, Button, Col, Pagination, Form, Input, message, Select, Typography, Space, Tag, Switch, Tooltip, Popover } from "antd";
import Action from "@c/buttonAction/Index";
// http
import http from '../../../utils/request';
// 加密
import { enDES3_pass } from "@/utils/validate";


const { Text, Link } = Typography;
const { TextArea } = Input;
const { Option } = Select;

class CloudAccountManage extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "账户/UID", dataIndex: "name", key: "name", 
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <Link href="">
                                    {rowData.name}
                                </Link>
                                <Text >{rowData.uid}
                                </Text>
                            </Space>
                        )
                    }
                },
                {title: "云平台", dataIndex: "platform", key: "platform", width: 120},
                {title: "区域", dataIndex: "region", key: "region",
                    render: (text, rowData) => {
                        var tag_style = {float: 'left', margin: '2px'}
                        return(
                            <div>
                                {
                                rowData.region.map(tag => (
                                    <div style={tag_style}><Tag key={tag} color="processing">{tag}</Tag></div>
                                ))
                                }
                            </div>
                        )
                    }            
                },
                {title: "默认事业部", dataIndex: "division_name", key: "division_name",
                    render: (text, rowData) => {
                        return (
                            <Tag>{rowData.division_name}</Tag>
                        )
                    }
                },
                {title: "监控巡检", dataIndex: "cms_monitor", key: "cms_monitor",
                    render: (text, rowData) => {
                        return (
                            <Switch 
                                size="small"
                                defaultChecked={rowData.cms_monitor} 
                                onClick={() => this.onChangeCmsMonitorStatus(rowData.id)} 
                            />
                        )
                    }
                },
                {title: "AcessKeyID", dataIndex: "ak", key: "ak"},
                {title: "账户余额", dataIndex: "balance", key: "balance", width: 120,
                    render: (text, rowData) => {
                        var display = null
                        if (parseInt(rowData.balance) >= parseInt(rowData.balance_alert)) {
                            display = <Tag key={rowData.balance} color="green">{rowData.balance}</Tag>
                        } else {
                            display = <Tag key={rowData.balance} color="red">{rowData.balance}</Tag>
                        }
                        return(
                            <span>{display}</span>
                        )
                    }
                },
                {title: "预警余额", dataIndex: "balance_alert", key: "balance_alert", width: 120},
                {title: "资源标签", dataIndex: "tag", key: "tag", ellipsis: {showTitle: false,},
                    render: (text, rowData) => {
                        var tag_style = {margin: '2px', }
                        var tag_data = []
                        rowData.tag.map(tag => (
                            tag_data.push(<Tag key={tag} style={tag_style} color="geekblue">{tag}</Tag>)
                       ))
                        return(
                            <Tooltip title={tag_data}>
                                {
                                    <span>{tag_data}</span>
                                }
                            </Tooltip>
                        )
                    }
                },
                {title: "授权用户", dataIndex: "authorization_list", key: "authorization_list", ellipsis: {showTitle: false,},
                    render: (text, rowData) => {
                        var tag_style = {margin: '2px', }
                        var authorization_list = rowData.authorization_list ? rowData.authorization_list : []
                        var authorization_data = []

                        authorization_list.map(authorization => (
                            authorization_data.push(<Tag color="magenta" style={tag_style}>{authorization}</Tag>)
                        ))

                        return(
                                <Tooltip title={authorization_data}>
                                    {
                                    <span>{authorization_data}</span>
                                    }
                                </Tooltip>
                        )
                    }
                },
                {title: "云安全分", dataIndex: "sas_grade", key: "sas_grade", width: 100,},
                {title: "最后修改时间", dataIndex: "updated", key: "updated"},
                {title: "操作", dataIndex: "operation", key: "operation", 
                    render: (text, rowData) => {
                        return (
                            <div className="inline-button">
                                <Action>
                                    <Action.Button onClick={() => this.onEditCloudAccountBtn({rowData: rowData, status: true})}>编辑</Action.Button>
                                    <Action.Button onClick={() => this.onGrantAuthorizationBtn(rowData)}>授权</Action.Button>
                                    <Action.Button onClick={() => this.onEditKeyBtn({rowData: rowData, status: true})}>更新密码</Action.Button>
                                    <Action.Button onClick={() => this.onSyncBillingBtn({rowData: rowData, status: true})}>同步余额</Action.Button>
                                    <Action.Button onClick={() => this.onSyncResourceBtn({rowData: rowData, status: true})}>同步资源</Action.Button>
                                    <Action.Button onClick={() => this.onDeleteCloudAccountBtn(rowData)}>删除</Action.Button>
                                </Action>
                            </div>
                        )
                    }           
                }
            ],
            loading: false,
            visible_add: false,     // 添加
            visible_edit: false,    // 编辑
            visible_key_edit: false,
            visible_change_tag: false,
            visible_delete: false,  // 删除
            visible_grant: false,   // 账户授权
            visible_resource: false, // 同步资源
            visible_check_user: false, // 用户检测
            loading_check_user: false, // 用户检测按钮
            resource_loading: false, // 同步资源按钮
            change_account_list: '',    // 批量替换标签展示
            visible_edit_id: '',
            visible_edit_name: '',
            visable_edit_code: '',
            cloud_account_id: '',
            cloud_account_name: '',
            cloud_account_tag: [''],
            search_cloud_account_platform: '',
            search_cloud_account_name: '',
            search_cloud_account_ak: '',
            search_cloud_account_authorization_list: '',
            search_cloud_account_cms_monitor: null,
            platform_list_option: [],
            tag_list_option: [],
            region_list_option: [],
            selectedRowKeys: [],
            division_list_option: [],
        }
        this.formRefAdd = React.createRef();
        this.formRefEdit = React.createRef();
        this.formRefMsg = React.createRef();
        this.formRefKeyEdit = React.createRef();
        this.formRefChangeTag = React.createRef();
        this.formRefGrant = React.createRef();
        this.formRefResource = React.createRef();
        this.formRefCheckUser = React.createRef();
    }

    componentDidMount() {
        this.loadData()
        this.loadDataCloudPlatform()
        this.loadDataCloudTag()
        this.loadDataDivision()
    }

    loadDataCloudTag = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/tag', {params: requestData}).then(response=> {
            const resp_data = response.data.data.items
            const tag_list_option = []
            for (let i = 0; i < resp_data.length; i++) {
                tag_list_option.push(<Option key={resp_data[i].code}>{resp_data[i].name}</Option>)
            }
            this.setState({
                tag_list_option: tag_list_option
            })
        })
    }

    loadDataCloudPlatform = () => {
        // 获取云平台列表
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=> {
            const resp_data = response.data.data.items
            
            const platform_list_option = []
            for (let i = 0; i < resp_data.length; i++) {
                platform_list_option.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                platform_list_option: platform_list_option,
            })
        })
    }

    loadDataDivision = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/division', {params: requestData}).then(response=>{
            const division_list_option = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                division_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].name}</Option>)
            }
            this.setState({
                division_list_option: division_list_option
            })
            console.log('resp_data', resp_data)
        })
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'platform__contains': this.state.search_cloud_account_platform,
            'name__contains': this.state.search_cloud_account_name,
            'ak__contains': this.state.search_cloud_account_ak,
            'authorization_list__contains': this.state.search_cloud_account_authorization_list,
            'cms_monitor': this.state.search_cloud_account_cms_monitor,
        }
        // 获取云账户列表
        http.get('/cloud/account', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

    /** 云平台搜索 */
    onFinishSearch = (data) => {
        this.setState({
            page: 1,
            search_cloud_account_name: data.name ? data.name : '',
            search_cloud_account_ak: data.ak ? data.ak : '',
            search_cloud_account_platform: data.platform ? data.platform : '',
            search_cloud_account_cms_monitor: data.cms_monitor,
            search_cloud_account_authorization_list: data.authorization_list ? data.authorization_list : ''
        })
        this.loadData()
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_cloud_account_name: value
            })
        } else {
            this.setState({
                search_cloud_account_name: ''
            })            
        }
    }

    /** 添加云平台按钮 */
    onAddCloudAccountBtn = () => {
        this.setState({
            visible_add: true
        })
    }

    // 用户批量检测按钮
    onCheckUserBtn = () => {
        this.setState({
            visible_check_user: true
        })
    }

    // 用户批量检测提交按钮
    onFinishCheckUser = (data) => {
        this.setState({
            visible_check_user: false
        })

        message.success("用户信息已提交至后台执行")

        // 获取需要批量替换的云账户信息
        const requestData = {
            users: data.users,
            types: 'check_user',
        }
        http.patch('/cloud/account', requestData).then(response=>{
            this.formRefCheckUser.current.resetFields()
        }).catch()

    }

    // 用户批量检测取消按钮
    onFinishCheckUserCancel = () => {
        this.setState({
            visible_check_user: false
        })
        this.formRefCheckUser.current.resetFields()
    }

    // 批量替换云账户标签
    onChangeTagBtn = () => {
        if (this.state.selectedRowKeys.length>0) {
            // 获取需要批量替换的云账户信息
            const requestData = {
                account_id_list: this.state.selectedRowKeys,
                types: 'get_account_list',
            }
            http.patch('/cloud/account', requestData).then(response=>{
                const resp_data = response.data.data
                const resp_data_2 = resp_data.join("\n")
                this.setState({
                    change_account_list: resp_data_2
                })

                this.formRefChangeTag.current.setFieldsValue({
                    change_account_list: this.state.change_account_list,
                    change_account_list_id: this.state.selectedRowKeys
                })
                
            }).catch()

            this.setState({
                visible_change_tag: true
            })
        } else {
            message.info('请先选中需要替换标签的云账户')
        }
    }

    // 批量替换标签取消
    onFinishChangeTagCancel = () => {
        this.setState({
            visible_change_tag: false,
            selectedRowKeys: ''
        })
        this.formRefChangeTag.current.resetFields()
    }

    // 批量替换标签提交
    onFinishChangeTag = (data) => {
        const requestData = {
            change_account_list: data.change_account_list,
            change_account_list_id: data.change_account_list_id,
            tag: data.tag,
            types: 'change_account_tag',
        }

        http.patch('/cloud/account', requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_change_tag: false,
                selectedRowKeys: [],
            })
            this.formRefChangeTag.current.resetFields();
            this.loadData()
        }).catch()
    }


    /** 添加云平台取消 */
    onFinishAddCancel = () => {
        this.setState({
            visible_add: false
        })
        this.formRefAdd.current.resetFields()
    }

    /** 添加云平台提交 */
    onFinishAdd = (data) => {
        const requestData = {
            platform: data.platform,
            uid: data.uid,
            name: data.name,
            region: data.region,
            //password: data.password,
            ak: data.ak ? data.ak : '',
            //sk: data.sk ? data.sk : '',
            balance_alert: data.balance_alert,
            tag: data.tag,
            division_id: data.division_id
        }
        requestData.sk = enDES3_pass(data.sk ? data.sk : '');
        requestData.password = enDES3_pass(data.password ? data.password : '');
        http.post('/cloud/account', requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData()
        }).catch()
    }

    // 编辑ak，sk，密码信息
    onEditKeyBtn =  (data) => {
        this.setState({
            visible_key_edit: true,
        })
        http.get('/cloud/account').then(response=> {
            this.formRefKeyEdit.current.setFieldsValue({
                id: data.rowData.id,
                password: '',
                ak: data.rowData.ak,
                sk: '',
            })
        })
    }

    onSyncBillingBtn = (data) => {
        this.setState({
            loading: true
        })
        const requestData = {
            types: 'button_sync_billing'
        }
        http.patch('/cloud/account/' + data.rowData.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading: false
            })
            this.loadData()
        }).catch()
    }

    // 同步资源
    onSyncResourceBtn = (data) => {
        this.setState({
            visible_resource: true
        })
        http.get('/cloud/account').then(response=> {
            this.formRefResource.current.setFieldsValue({
                id: data.rowData.id,
            })
        })
    }

    // 同步资源取消
    onFinishResourceCancel = () => {
        this.setState({
            visible_resource: false,
        })
        this.formRefResource.current.resetFields()
    }

    // 同步资源提交
    onFinishResource = (data) => {
        console.log(data)
        this.setState({
            loading: true,
            resource_loading: true,
        })
        const requestData = {
            id: data.id,
            types: 'sync_resource',
            tag: data.tag,
        }
        http.patch('/cloud/account/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading: false,
                visible_resource: false,
                resource_loading: false,
            })
            this.formRefResource.current.resetFields()
            this.loadData()
        }).catch()
    }

    /** 编辑云账户按钮 */
    onEditCloudAccountBtn = (data) => {
        this.setState({
            visible_edit: true,
        })
        const requestData = {
            'page': 1,
            'limit': 1000,
            'platform': data.rowData.platform,
        }

        // 获取云账户列表
        http.get('/cloud/region', {params: requestData}).then(response=>{
            const resp_data = response.data.data.items
            const region_list_option = []
            for (let i=0; i < resp_data.length; i++) {
                region_list_option.push(<Option key={resp_data[i].code}>{resp_data[i].name}</Option>)
            }

            this.setState({
                region_list_option: region_list_option
            })
        }).catch()
        http.get('/cloud/account').then(response=> {
            this.formRefEdit.current.setFieldsValue({
                id: data.rowData.id,
                uid: data.rowData.uid,
                name: data.rowData.name,
                platform: data.rowData.platform,
                balance_alert: data.rowData.balance_alert,
                tag: data.rowData.tag,
                region: data.rowData.region,
                division_id: String(data.rowData.division_id)
            })
        })
    }

    // 编辑云账户密钥信息取消
    onFinishKeyEditCancel = () => {
        this.setState({
            visible_key_edit: false,
        })
        this.formRefKeyEdit.current.resetFields();
    }

    /** 编辑云平台取消 */
    onFinishEditCancel = () => {
        this.setState({
            visible_edit: false,
        })
        this.formRefEdit.current.resetFields();
    }

    // 编辑云账户密钥信息提交
    onFinishKeyEdit = (data) => {
        const requestData = {
            ak: data.ak ? data.ak : '',
            types: 'account_change_secret'
        }
        requestData.sk = enDES3_pass(data.sk ? data.sk : '');
        requestData.password = enDES3_pass(data.password ? data.password : '');
        http.patch('/cloud/account/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_key_edit: false
            })
            this.formRefKeyEdit.current.resetFields();
            this.loadData()
        }).catch()
    }

    /** 编辑云平台提交 */
    onFinishEdit = (data) => {
        const requestData = {
            platform: data.platform,
            uid: data.uid,
            name: data.name,
            balance_alert: data.balance_alert,
            tag: data.tag,
            region: data.region,
            division_id: data.division_id
        }
        http.put('/cloud/account/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_edit: false
            })
            this.formRefEdit.current.resetFields();
            this.loadData()
        }).catch()
    }

    /** 删除云平台提交 */
    handleCloudPlatformDelete = () => {
        http.delete('/cloud/account/' + this.state.cloud_account_id).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_delete: false,
            })
            this.loadData()
        }).catch()    
    }

    /** 删除云平台按钮 */
    onDeleteCloudAccountBtn = (data) => {
        this.setState({
            cloud_account_id: data.id,
            cloud_account_name: data.name,
            visible_delete: true
        })
    }


    // 根据云平台选择云区域
    changeCloudPlatform = (value) => {
        const requestData = {
            'page': 1,
            'limit': 1000,
            'platform': value,
        }

        // 获取云账户列表
        http.get('/cloud/region', {params: requestData}).then(response=>{
            const resp_data = response.data.data.items
            const region_list_option = []
            for (let i=0; i < resp_data.length; i++) {
                region_list_option.push(<Option key={resp_data[i].code}>{resp_data[i].name}</Option>)
            }

            this.setState({
                region_list_option: region_list_option
            })
        }).catch()
    }

    // 批量选中标签
    onSelectChange = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys: selectedRowKeys
        })
    }

    // 修改资源巡检状态
    onChangeCmsMonitorStatus = (id) => {
        this.setState({
            loading: true
        })
        const requestData = {
            id: id,
            types: 'change_cms_monitor_status',
        }
        http.patch('/cloud/account/' + id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading: false
            })
            this.loadData()
        }).catch()
    }

    // 授权按钮
    onGrantAuthorizationBtn = (rowData) => {
        this.setState({
            visible_grant: true
        })
        http.get('/cloud/account').then(response=> {
            this.formRefGrant.current.setFieldsValue({
                id: rowData.id,
                authorization_data: rowData.authorization_list,
            })
        })
    }

    // 授权取消
    onFinishGrantAuthorizationCancel = () => {
        this.setState({
            visible_grant: false
        })
        this.formRefGrant.current.resetFields()
    }

    // 授权提交
    onFinishGrantAuthorization = (data) => {
        this.setState({
            loading: true
        })
        const requestData = {
            id: data.id,
            types: 'grant_authorization',
            authorization_data: data.authorization_data
        }
        http.patch('/cloud/account/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading: false,
                visible_grant: false,
            })
            this.loadData()
        }).catch()
    }

    render(){
        const { loading, dataSource, columns, page, total, visible_add, visible_resource, visible_edit, visible_change_tag, visible_key_edit, visible_delete,  visible_grant,
            visible_check_user, cloud_account_name, platform_list_option, tag_list_option, region_list_option, division_list_option, selectedRowKeys, resource_loading, loading_check_user } = this.state
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        }

        const content = <div>
                <br />
                <font color="green">监控巡检</font>
                <div>启用监控巡检按钮后，后台会执行下面几个动作</div>
                <div>1. 云安全中心安全分同步</div>
                <div>2. 云安全中心漏洞扫描</div>
                <div>3. 云监控遗漏资源扫描</div>
                <div>4. 云监控异常主机Agent扫描</div>
                <div>5. 云监控当前告警数据同步</div>
                <div>6. OPS中未打标签(告警/财务)的资源推送</div>
                <div>7. 所有爬虫类的都需要打开这个功能</div>
                <br />
                <div></div>
                <font color="green">账户/预警余额</font>
                <div>1. 当前账户的余额低于预警余额时, 会进行预警推送</div>
                <br />
                <font color="green">资源标签</font>
                <div>1. 后台定时任务同步哪些资源取决于给该账户打的资源标签</div>
                <br />
                <font color="green">授权用户</font>
                <div>1. 当用户被授权后, 可通过小助手来查询被授权云账户的密码</div>
                <br />
                <font color="green">默认事业部</font>
                <div>1. 当云账户配置了默认事业部以后，所有无法识别出资源费用归属的，均分摊在当前选中的事业部下面</div>
            </div>

        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="云账户" name="name">
                        <Input placeholder="请输入云账户" size="small" />
                    </Form.Item>
                    <Form.Item label="云ak" name="ak">
                        <Input placeholder="请输入AccessKey" size="small" />
                    </Form.Item>
                    <Form.Item label="授权用户" name="authorization_list">
                        <Input placeholder="请输入用户姓名" size="small" />
                    </Form.Item>
                    <Form.Item label="云平台" name="platform">
                        <Select
                            size="small"
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择平台"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {platform_list_option}
                        </Select>
                    </Form.Item>
                    <Form.Item label="巡检状态" name="cms_monitor">
                        <Select
                            size="small"
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="查询账户巡检状态"
                            >
                            <Option key={true}>启用</Option>
                            <Option key={false}>禁用</Option>
                        </Select>                      
                    </Form.Item>
                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>
                
                <div style={myStyle1}>
                    <Button type="primary" onClick={this.onAddCloudAccountBtn}>添加云账户</Button>
                    <Button type="primary" onClick={this.onChangeTagBtn}>批量替换标签</Button>
                    <Button type="primary" onClick={this.onCheckUserBtn}>用户检测</Button>
                    <Popover content={content} title="提示" trigger="hover">
                        <Button>说明</Button>
                    </Popover>
                </div>
                <Table
                    pagination={false}
                    rowSelection={rowSelection}
                    rowKey="id"
                    columns={columns}
                    dataSource={dataSource}
                    loading={loading}
                    // scroll={{ y: 500, x: '70vw' }}
                    scroll={{ y: 600, x: 1800 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="用户检测"
                    visible={visible_check_user}
                    onCancel={this.onFinishCheckUserCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishCheckUser}
                        ref={this.formRefCheckUser}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="用户名称" name="users">
                            <TextArea rows={20} placeholder="请输入用户名称，每行一个" />
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary" loading={loading_check_user}>确定</Button>
                        </Form.Item>                                                               
                    </Form>   
                
                </Modal>   

                <Modal
                    title="添加云账户"
                    visible={visible_add}
                    onCancel={this.onFinishAddCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishAdd}
                        ref={this.formRefAdd}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="账户UID" name="uid" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="账户名称" name="name" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="账户密码" name="password">
                            <Input></Input>
                        </Form.Item>
                        
                        <Form.Item label="账户AK" name="ak">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="账户SK" name="sk">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="余额告警" name="balance_alert" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="云平台名称" name="platform" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云平台"
                                onChange={this.changeCloudPlatform}
                                >
                                {platform_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="云区域名称" name="region" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云区域"
                                mode="multiple"
                                >
                                {region_list_option}
                            </Select>
                        </Form.Item>
                        
                        <Form.Item label="云平台标签" name="tag" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择标签"
                                mode="multiple"
                                >
                                {tag_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="默认事业部" name="division_id" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择事业部"
                                >
                                {division_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="批量替换标签"
                    visible={visible_change_tag}
                    onCancel={this.onFinishChangeTagCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishChangeTag}
                        ref={this.formRefChangeTag}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="云账户ID" name="change_account_list_id" hidden>
                            <Input disabled></Input>
                        </Form.Item>

                        <Form.Item label="云账户列表" name="change_account_list">
                            <TextArea disabled autoSize={true}></TextArea>
                        </Form.Item>
                        
                        <Form.Item label="云平台标签" name="tag" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择标签"
                                mode="multiple"
                                >
                                {tag_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="编辑云账户"
                    visible={visible_edit}
                    onCancel={this.onFinishEditCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishEdit}
                        ref={this.formRefEdit}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="云平台名称" name="platform" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云平台"
                                disabled
                                >
                                {platform_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="云平台区域" name="region" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云平台"
                                mode="multiple"
                                >
                                {region_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="云平台标签" name="tag" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择标签"
                                mode="multiple"
                                >
                                {tag_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="云账户ID" name="id" hidden>
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item label="云账户UID" name="uid" rules={[{ required: true}]}>
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item label="云账户名称" name="name" rules={[{ required: true}]}>
                            <Input disabled></Input>
                        </Form.Item>

                        <Form.Item label="默认事业部" name="division_id" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择事业部"
                                >
                                {division_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="余额告警" name="balance_alert" rules={[{ required: true}]}>
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>


                <Modal
                    title="编辑云账户密钥"
                    visible={visible_key_edit}
                    onCancel={this.onFinishKeyEditCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishKeyEdit}
                        ref={this.formRefKeyEdit}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="云账户ID" name="id" hidden>
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item label="云账户密码" name="password">
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item label="云账户AK" name="ak">
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item label="云账户SK" name="sk">
                            <Input ></Input>
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="删除云账户"
                    visible={visible_delete}
                    onOk={this.handleCloudPlatformDelete}
                    onCancel={() => {this.setState({visible_delete: false, cloud_account_id: ''})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定删除云账户<span style={{color: 'red'}}> {cloud_account_name}</span>? 删除后将无法恢复</p>
                </Modal>

                <Modal
                    title="添加用户权限"
                    visible={visible_grant}
                    onCancel={this.onFinishGrantAuthorizationCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishGrantAuthorization}
                        ref={this.formRefGrant}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="云账户ID" name="id" hidden>
                            <Input ></Input>
                        </Form.Item>

                        <Form.Item label="授权用户列表" name="authorization_data">
                            <TextArea rows={4} maxLength={512} placeholder="输入多个用户请以,分隔"/>
                        </Form.Item> 

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                        
                    </Form>           
                </Modal>

                <Modal
                    title="同步资源"
                    visible={visible_resource}
                    onCancel={this.onFinishResourceCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishResource}
                        ref={this.formRefResource}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="云账户ID" name="id" hidden>
                            <Input ></Input>
                        </Form.Item>

                        <Form.Item label="云平台标签" name="tag" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择标签"
                                // mode="multiple"
                                >
                                {tag_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button size="small" htmlType="submit" type="primary" loading={resource_loading}>确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

            </Fragment>
        )
    }
}
export default CloudAccountManage;